<template>
  <div>
    <div class="courseprod">
      <div class="main">
        <div class="percent">
          <div class="title">
            <div>日期：{{ systemDate }}</div>
            <div @click="$router.push('jjdownload')">下载预测真题</div>
          </div>
          <div class="ztyc">真题预测情况栏</div>
          <div class="bt">
            <div class="pj">平均命中率</div>
            <div>新增预测题</div>
          </div>
          <div class="number">
            <div>
              <span class="fz60"> {{ homeData.ztLv }}</span
              ><span>%</span>
            </div>
            <div class="fz60-999">2569</div>
          </div>
          <div class="btn" @click="$router.push('cate')">练习预测真题</div>
          <div></div>
        </div>
        <div class="coursecontent">
          <div>
            <span class="br bb">
              <b class="icon">
                <img
                  src="@/assets/imgs/practice_icons/题库编写1_lesson.png"
                  alt=""
                />
              </b>
              <b>
                <p class="title" @click="$router.push('cate')">真题题库</p>
                <p class="txt">
                  已有6972道 <br />
                  持续更新中
                </p>
              </b>
            </span>
            <span class="br bb">
              <b class="icon">
                <img
                  src="@/assets/imgs/practice_icons/预测引擎.png"
                  alt=""
                />
              </b>
              <b>
                <p class="title" >真题预测机制</p>
                <p class="txt">
                  准确预测本周 <br />
                  本周预测
                </p>
              </b>
            </span>
            <span class="bb">
              <b class="icon">
                <img src="@/assets/imgs/practice_icons/ai.png" alt="" />
              </b>
              <b>
                <p class="title" @click="$router.push('AIanalysis')">成绩单分析</p>
                <p class="txt">
                  最准确的分析报告 <br />
                  锁定努力方向
                </p>
              </b>
            </span>
          </div>
          <div>
            <span class="br">
              <b class="icon">
                <img src="@/assets/imgs/practice_icons/计划.png" alt="" />
              </b>
              <b>
                <p class="title"  @click="$router.push('studyplan')">学习计划定制</p>
                <p class="txt">
                  科学复习
                  <br />
                  提升效率
                </p>
              </b>
            </span>
            <span class="br">
              <b class="icon">
                <img
                  src="@/assets/imgs/practice_icons/题库编写1_lesson.png"
                  alt=""
                />
              </b>
              <b>
                <p class="title" @click="$router.push('myhomework')">我的作业本</p>
                <p class="txt">每日作业，名师 一对一批改反馈</p>
              </b>
            </span>
            <span>
              <b class="icon">
                <img
                  src="@/assets/imgs/practice_icons/作业进度.png"
                  alt=""
                />
              </b>
              <b>
                <p class="title">定制练习</p>
                <p class="txt">最了解你薄弱项 的筛选定制机制</p>
              </b>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- PTE入门好课 -->
    <div class="pte_title">
     PTE入门好课
    </div>
    <div class="pte_box">
      <!-- PTE课区域 -->
      <div class="zbcourse">
        <div v-for="(item, index) in courseList" :key="index" class="scaleDiv">
          <router-link to="" @click.native="goTo(item.id, item.type)"
            ><img v-lazy="item.image" alt=""
          /></router-link>
          <p class="title-intro">{{ item.title }}</p>
          <p class="content">{{ item.memo }}</p>
          <div class="">
            <span class="teacher">讲师：{{ item.teacherName }}</span>

            <span class="study-num">{{ item.num }}人已学</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 了解PTE -->
    <div class="learnpte">
      <div class="main">
        <div class="h140">
          <router-link to="/ptecourse">了解PTE</router-link>
        </div>
        <div class="h280">
          <div class="title">
            <div class="tip">次数少，难度大</div>
            <div class="nm">雅思</div>
            <div class="bdr50">VS</div>
          </div>
          <div class="contain">
            <div class="kccs">考场次数更多</div>
            <div class="fz28">PTE</div>
            <div class="pd50">
              PTE与雅思托福该选择哪个?各有什么不同，分数又该如何换算?与雅思托福比较起来，PTE
              的考场次数更多，评分规则更适合中国学生，提分更高效。
            </div>
          </div>
        </div>
        <div class="h280">
          <div class="title">
            <div class="tip">次数少，难度大</div>
            <div class="nm">托福</div>
            <div class="bdr50">VS</div>
          </div>
          <div class="contain2">
            <div class="kccs">考场次数更多</div>
            <div class="fz28">PTE</div>
            <div class="pd50">
              PTE与雅思托福该选择哪个?各有什么不同，分数又该如何换算?与雅思托福比较起来，PTE
              的考场次数更多，评分规则更适合中国学生，提分更高效。
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Easton 教学理念和方法体系说明 -->
    <div class="lnff">
      <div class="main">
        <!-- 教学理念 -->
        <div class="title">我们的教学理念</div>
        <div class="list">
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 21.png" alt=""
            /></span>
            <p>坚守</p>
            <p class="intro">
              作为行业的奠基者，我们始终相信，没有考不过的学生，只有技艺不精的老师
            </p>
          </div>
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 22.png" alt=""
            /></span>
            <p>专业</p>
            <p class="intro">
              专业是认真负责的态度，是不计成本的教研，是夜以继日的积累，也是锲而不舍的团队
            </p>
          </div>
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 20.png" alt=""
            /></span>
            <p>贴心</p>
            <p class="intro">
              1v3辅导模式，任课老师，助教，和小管家三剑合璧，只为了你
            </p>
          </div>
        </div>
        <!-- 教学体系 -->
        <div class="title">我们的教学体系</div>
        <div class="list">
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 26.png" alt=""
            /></span>
            <p>教</p>
            <p class="intro">
              根据得分点设计独家课程体系​所讲即所考，化繁为简精讲考试原题，巩固得分点和难点
            </p>
          </div>
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 28.png" alt=""
            /></span>
            <p>辅</p>
            <p class="intro">
              一位同学学习 <br />
              三位老师辅导 <br />
              配备学习社群和自习室
            </p>
          </div>
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 27.png" alt=""
            /></span>
            <p>练</p>
            <p class="intro">
              每日作业，按时保量，巩固所学，实现质变任课教师一对一点评，全程陪伴，有问必答
            </p>
          </div>
        </div>
        <!-- 教学方法 -->
        <div class="title">我们的教学方法</div>
        <div class="list">
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 30.png" alt=""
            /></span>
            <p>课前</p>
            <p class="intro">
              专属助教老师课前一对一指导，Orientation带领学生入门视频课程细致讲解各题型评分标准，无限重听课前语言基础评估，定制课程
            </p>
          </div>
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 31.png" alt=""
            /></span>
            <p>课中</p>
            <p class="intro">
              每一位任课教师，都有三年以上的全职教学PTE经验系统全面讲解PTE所有题型答题技巧及方式边讲边练，汇总学生课上的薄弱环节
              ​
            </p>
          </div>
          <div>
            <span
              ><img src="../../assets/imgs/practice_icons/图层 32.png" alt=""
            /></span>
            <p>课后</p>
            <p class="intro">
              每日作业，任课教师一对一亲自批改阶段反馈学习报告，随时调整复习策略评估成绩单，给出每周学习建议
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 侧边咨询组件 -->
    <Asider></Asider>
  </div>
</template>

<script>
import api from "@/config/api";
import { sendPost } from "@/utils/http";
// 导入侧边咨询链接组件
import Asider from '../aside'
export default {
  name: 'Practice',
  components: {
    Asider
  },
  data () {
    return {
      systemDate: '',
      courseList: [], // pte课程列表
      homeData: {}
    }
  },
  created () {
    this.getDate()
    this.getCourseList()
    this.getHomeData()
  },
  methods: {
    getHomeData () {
      sendPost(api.getHomeData, {}).then(res => {
        console.log(res);
        this.homeData = res.data
      })
    },
    getDate () {
      let date = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        date: new Date().getDate(),
      }
      let systemDate = date.year + '-' + (date.month > 9 ? date.month : '0' + date.month) + '-' + (date.date > 9 ? date.date : '0' + date.date);
      console.log(systemDate);
      this.systemDate = systemDate
    },
    // 获取PTE课程列表
    getCourseList () {
      sendPost(api.getCourseList, {
        type: "2",
        offset: 0,
        limit: 8
      }).then(res => {
        // console.log(res);
        this.courseList = res.data
      })
    },
    goTo (id, type) {
      // console.log(id);
      window.sessionStorage.setItem('type', type)
      window.sessionStorage.setItem('courseId', id)
      if (type === '1' || type === '2' || type === '3' || type === '4' || type === '5' || type === '6' || type === '7') {
        this.$router.push('cclcourseinfo?id=' + id)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.pte_title{
  width: 75rem;
  height: 7rem;
  line-height: 7rem;
  font-size: 2.5rem;
  color: #333;
  margin: 0 auto;
}
.main {
  width: 75rem;
  height: 100%;
  margin: auto;
  border-radius: 0.3125rem;
  overflow: hidden;
  padding-bottom: 1.25rem;
  box-sizing: border-box;
}
.courseprod {
  height: 32.5rem;
  padding: 3.75rem 0;
  box-sizing: border-box;
  background-color: #f2f4f7;
  box-sizing: border-box;
  .main {
    width: 75rem;
    height: 100%;
    margin: auto;
    display: flex;
    border-radius: 0.3125rem;
    overflow: hidden;
    .coursecontent {
      margin-left: 1.6875rem;
      padding: 2.5rem;
      width: 49.75rem;
      height: 25.875rem;
      background-color: #fff;
      border-radius: 0.1875rem;
      box-sizing: border-box;
      position: relative;
      div {
        height: 50%;
        display: flex;
        .br {
          border-right: 0.0625rem solid #ededed;
        }
        .bb {
          border-bottom: 0.0625rem solid #ededed;
        }
        span {
          flex: 1;
          padding-top: 2.25rem;
          padding-left: 1.25rem;
          padding-right: 0.9375rem;
          box-sizing: border-box;
          display: flex;
          .icon {
            width: 3.125rem;
            height: 3.125rem;
            margin-right: 0.5125rem;
            img {
              // border: 1px dashed #666;
              padding-bottom: 0.1875rem;
            }
          }
          b {
            font-weight: normal;
          }
          .title {
            font-size: 1.25rem;
            color: #333333;
            cursor: pointer;
          }
          .txt {
            font-size: 1.125rem;
            color: #666;
            margin-top: 0.375rem;
          }
        }
      }
    }
    .percent {
      width: 23.5625rem;
      height: 25.875rem;
      font-size: 1.125rem;
      color: #fff;
      text-align: center;
      line-height: 3.75rem;
      background-color: #fff;
      cursor: pointer;
      .title {
        display: flex;
        div {
          cursor: pointer;
          flex: 1;
          height: 3.75rem;
          background-color: #ff5e4e;
        }
      }
      .ztyc {
        height: 6.25rem;
        font-size: 1.25rem;
        line-height: 6.25rem;
        color: #999;
      }
      .bt {
        display: flex;
        color: #999;
        font-size: 1.25rem;
        div {
          flex: 1;
          text-align: center;
        }
        .pj {
          color: #ff5e4e;
        }
      }
      .number {
        display: flex;
        div {
          flex: 1;
          height: 3.75rem;
          span {
            color: #ff5e4e;
          }
          .fz60 {
            font-size: 3.75rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
          }
        }
        .fz60-999 {
          color: #999;
          font-size: 3.75rem;
          font-weight: bold;
        }
      }
      .btn {
        width: 11.5rem;
        height: 3.125rem;
        line-height: 3.125rem;
        margin-left: 50%;
        transform: translateX(-50%);
        color: #fff;
        background: linear-gradient(to right, #ff9388, #ff5f4f);
        margin-top: 2.25rem;
        border-radius: 1.5625rem;
      }
    }
  }
}
.learnpte {
  background-color: #f2f4f7;
  height: 47.0625rem;
  box-sizing: border-box;
  margin: 0 auto;
  .h140 {
    height: 6.75rem;
    font-size: 2.5rem;
    line-height: 6.75rem;
    color: #333;
    a {
      color: #333;
      text-decoration: none;
    }
  }
  .h280 {
    height: 17.5rem;
    background-color: #fff;
    margin-bottom: 1.25rem;
    display: flex;
    border-radius: 0.3125rem;
    .title {
      flex: 1;
      position: relative;
      .tip {
        padding-top: 5.5rem;
        padding-left: 7.3rem;
        color: #666;
      }
      .nm {
        padding-left: 7.3rem;
        font-size: 1.75rem;
        line-height: 4.0625rem;
        font-weight: 400;
        color: #333;
      }
      .bdr50 {
        border-radius: 50%;
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
        text-align: center;
        color: #ff5e4e;
        position: absolute;
        background-color: #fff;
        right: -1.5rem;
        top: 42%;
        font-size: 1.75rem;
      }
    }
    .fz28 {
      font-size: 1.75rem;
      margin: 0.625rem 0;
    }
    .pd50 {
      padding: 0 3.125rem;
      font-size: 1.125rem;
      line-height: 2rem;
    }
    .contain {
      flex: 3;
      background-color: #ff5e4e;
      color: #fff;
      div {
        padding-left: 3.75rem;
      }
      .kccs {
        padding-top: 5.5rem;
      }
    }
    .contain2 {
      flex: 3;
      background-color: #ff994e;
      color: #fff;
      div {
        padding-left: 3.75rem;
      }
      .kccs {
        padding-top: 5.5rem;
      }
    }
  }
}
.lnff {
  width: 100%;
  background-color: #fff;
  padding-bottom: 6.25rem;
  .main {
    width: 75rem;
    margin: auto;
    .title {
      height: 8.125rem;
      line-height: 8.125rem;
      color: #333;
      font-size: 2.5rem;
      text-align: center;
    }
    .list {
      display: flex;
      justify-content: space-between;
      padding: 0 0.625rem;
      div {
        width: 22.5rem;
        height: 27.3125rem;
        background: #ffffff;
        box-shadow: 0px 0px 0.625rem 0px rgba(11, 66, 89, 0.04);
        padding-top: 4.125rem;
        font-size: 1.5rem;
        color: #1a1a1a;
        text-align: center;
        span {
          display: flex;
          img {
            vertical-align: middle;
            margin: auto;
            margin-bottom: 3.125rem;
          }
        }
        .intro {
          font-size: 1.125rem;
          padding: 0 2.5rem;
          line-height: 2.25rem;
        }
      }
    }
  }
}

.zbcourse {
  width: 75rem;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  .scaleDiv {
    background-color: pink;
    transition: all 0.3s;
    margin-right: 1.6rem;
    margin-bottom: 1.875rem;
    background-color: #fff;
    width: 17.5rem !important;
    height: 17.875rem !important;
    cursor: pointer;
  }
  .scaleDiv:hover {
    transform: translateY(0.3125rem);
    box-shadow: 0 0 1.25rem 0.125rem #918f8f; /*盒子阴影*/
  }
  :nth-child(4) {
    margin-right: 0rem !important;
  }
  a {
    display: flex;
    width: 100%;
    height: 10.1875rem;
    background-color: #abcdef;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .content {
    font-size: 0.875rem;
    color: #999;
    line-height: 1.375rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
    margin-bottom: 0.25rem;
  }
  .title-intro {
    font-size: 1.25rem;
    color: #666;
    font-weight: 400;
    padding: 0 1.25rem;
    height: 3.4375rem;
    line-height: 3.4375rem;
    box-sizing: border-box;
    text-align: left;
  }
}

.teacher {
  margin-left: 1.25rem;
  margin-right: 3rem;
  box-sizing: border-box;
  height: 1.375rem;
  font-size: 0.875rem;
  color: #ff5e4e;
  background-color: #ffdfdc;
  text-align: center;
}
.study-num {
  padding-right: 1.25rem;
  text-align: right;
  box-sizing: border-box;
  color: #999;
}
</style>
